<template>
  <div class="pinlun-box">
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="输入评价的内容" v-model="val"></textarea>
    <div class="btn" @click="of">发表评论</div>
    <ul>
      <!-- 页面一上来先渲染数据 循环 -->
      <li v-for="(val,i) in pinlunTxt" :key="i">
        <div>第{{i+1}}楼 用户 : {{val.user_name}} 发表时间 :{{val.add_time | ctime}}</div>
        <p>{{val.content ==="undefined" ? '此用户很懒' : val.content }}</p>
      </li>
    </ul>
    <!-- 点击  执行fn函数 里的方法 -->
    <div class="btn-tx" @click="fn">点击加载更多</div>
  </div>
</template>
<script>
// 因为 很多页面都用到了评论功能 所以单独抽离了一个子组件  这里用到了父组件给子组件传值  通过绑定属性的方法 在son页面 绑定 这里通过props方法 接收一下
// 要同过不同的id 渲染不同的数据
export default {
  data() {
    return {
      // 借口规定给他个值  所以写个index
      index: 1,
      pinlunTxt: [],
      val :''
    };
  },
  created() {
    this.pinlun();
  },
  methods: {
    pinlun() {
      // 借口规定需要id和页码 所以这里拼接一下
      this.$http
        .get("api/getcomments/" + this.id + "?" + "pageindex=" + this.index)
        .then(res => {
          // 数组不能+= 所以用concat方法用于连接两个或多个数组。
          this.pinlunTxt = this.pinlunTxt.concat(res.body.message);
        });
    },
    fn() {
      // 点击index++ 从新调用请求 获取数据在渲染
      this.index++;
      this.pinlun();
    },
    of() {
      if(this.val.trim() === '') {
        alert('请输入内容')
        return
      } 
      this.$http.post('api/postcomment/'+this.id,{content : this.val}).then( res=> {
        if(res.status == 200) {
          alert('发表成功')
        }
        this.pinlunTxt.unshift({
          add_time : new Date(),
          content : this.val,
          user_name : '盗墓人'
        })
        this.val = ''
      }) 
    }
  },
  props: ["id"]
};
</script>
<style lang="less">
.pinlun-box {
  h3 {
    margin-top: 10px;
    font-size: 15px;
  }
  textarea {
    margin-top: 10px;
    height: 100px;
    margin-bottom: 0;
  }
  .btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    text-align: center;
    color: #fff;
    background: skyblue;
    margin-bottom: 15px;
  }
  ul {
    li {
      div {
        padding: 5px;
        font-size: 12px;
        background: #ccc;
        color: #333;
      }
      p {
        padding: 8px 5px;
        font-size: 12px;
        background: #fff;
      }
    }
  }
  .btn-tx {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid orange;
    color: orange;
  }
}
</style>


